<template>
	<div class="entry">
		<div class="entry__logo">
			<a href="javascript:;" class="logo">
				<img src="http://messeone-manager.b0.upaiyun.com/beta/components/enterprise/img/122-01.png" class="img-responsive">
			</a>
		</div>
		<div class="entry__wrap">
			<p class="entry__wrap-title">壹号展服，做最好的展会服务软件</p>
			<ul class="entry__wrap-nav">
				<li><a href="#" :class="{'active': ( currentView && currentView.indexOf('login')!=-1 )}"  @click.stop="changeModule('login')">登录</a></li>
				<li><a href="#" :class="{'active': ( currentView && currentView.indexOf('register')!=-1 )}" @click.stop="changeModule('register')">注册</a></li>
			</ul>
			<component :is="currentView"></component>
		</div>
	</div>
</template>

<script>
	import loginComponent from './login'
	import phoneLoginComponent from './phone-login'
	import registerComponent from './register'

	export default {
		data(){
			return {
			}
		},
		components:{
			'login':loginComponent,
			'phone-login':phoneLoginComponent,
			'register':registerComponent
		},
		computed:{
			currentView(){
				return this.$store.state.entry.currentView;
			}
		},
		methods:{
			changeModule(m){
				this.$store.dispatch( 'changeCurrentView',m )
			}
		},
		mounted(){
		}

	}
</script>
<style scoped lang="less">

	@import '../../assets/style/color';
	@import '../../assets/style/font';
	@tcColor:#ACABAA;

	.entry{
	    width: 340px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
	.logo{
		display: block;
		width:127px;
		margin:0 auto 25px;
	}
	.entry__wrap-title{
		color:@tcColor;
		font-size:@font16;
		margin-bottom:43px;
	}
	.entry__wrap-nav{
		color:@tcColor;
		padding:0;
		margin-bottom:30px;
		>li{
			display: inline-block;
			&:first-child{
				margin-right: 20px;
			}
			>a{
				font-size:@font18;
				color:@tcColor;
				padding:7px;
				display: block;
				&.active{
					color:#3C96DA;
					border-bottom:2px solid #3C96DA;
				}
			}
		}
	}
</style>